<template>
	<view class="medical-history">
		<!-- 顶部导航栏 -->
		<view class="header">
			<uni-icons class="back-icon" type="left" size="36rpx" color="#00CC71" @click="navigateBack" />
			<text class="title">添加病史数据</text>
		</view>

		<!-- 已有病史列表 -->
		<view class="history-section">
			<view class="section-header">
				<view class="green-dot"></view>
				<text>我的病史</text>
			</view>

			<view class="history-item" v-for="(item, index) in historyList" :key="index">
				<view class="item-info">
					<text class="disease-name">{{ item.name }}</text>
					<text class="disease-date">{{ item.date }}</text>
				</view>
				<uni-icons type="trash" size="32rpx" color="#C0392B" @click="deleteHistory(index)" />
				
			</view>
		</view>

		<!-- 新增病史按钮 -->
		<view class="add-btn" @click="openPopup">
			<uni-icons type="plus" size="60rpx" color="#00cb0d" />
			<text>新增病史数据</text>
		</view>

		<!-- 新增病史弹窗（居中显示） -->
		<uni-popup ref="historyPopup" type="center">
			<view class="popup-content">
				<!-- 病史描述输入 -->
				<input class="popup-input" type="text" placeholder="请输入病史描述" v-model="description" />

				<!-- 日期选择器 -->
				<view class="date-picker">
					<uni-icon type="calendar" size="32rpx" color="#999" />
					<picker mode="date" :value="selectedDate" @change="onDateChange">
						<text class="date-text">{{ selectedDate }}</text>
					</picker>
				</view>

				<!-- 确认添加按钮 -->
				<button class="confirm-btn" @click="addHistory">添加</button>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	// 模拟已有病史数据
	const historyList = ref([{
		name: '感冒',
		date: '2000-03-20'
	}])

	// 弹窗数据
	const description = ref('') // 病史描述
	const selectedDate = ref('2000-12-04') // 默认日期（可改当前日期）
	const historyPopup = ref(null) // 弹窗引用

	// 返回上一页
	function navigateBack() {
		uni.navigateBack()
	}

	// 打开弹窗
	function openPopup() {
		historyPopup.value.open()
		// 重置输入（可选：设置默认日期为当天）
		selectedDate.value = new Date().toISOString().slice(0, 10)
		description.value = ''
	}

	// 日期选择事件
	function onDateChange(e) {
		selectedDate.value = e.detail.value
	}

	// 添加病史
	function addHistory() {
		if (!description.value.trim()) {
			uni.showToast({
				title: '请输入病史描述',
				icon: 'none'
			})
			return
		}
		// 添加到列表
		historyList.value.push({
			name: description.value,
			date: selectedDate.value
		})
		// 关闭弹窗
		historyPopup.value.close()
		uni.showToast({
			title: '添加成功',
			icon: 'success'
		})
	}

	// 删除病史（带确认弹窗）
	function deleteHistory(index) {
		uni.showModal({
			title: '提示',
			content: '确定删除该病史吗？',
			success: (res) => {
				if (res.confirm) {
					historyList.value.splice(index, 1)
				}
			}
		})
	}
</script>

<style scoped>
	/* 页面基础样式 */
	.medical-history {
		background: #FFF;
		min-height: 100vh;
		padding-top: 90rpx;
	}

	/* 导航栏 */
	.header {
		display: flex;
		align-items: center;
		height: 120rpx;
		padding: 0 32rpx;
		border-bottom: 4rpx solid #00cb0d;
		box-shadow: 0 4rpx 12rpx rgba(0, 204, 113, 0.1);
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #00cb0d;
		margin-left: 16rpx;
	}

	/* 病史区域 */
	.history-section {
		padding: 32rpx;
	}

	.section-header {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.green-dot {
		width: 8rpx;
		height: 32rpx;
		background: #00cb0d;
		margin-right: 12rpx;
	}

	/* 病史项 */
	.history-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		border: 2rpx solid #AFFFD7;
		border-radius: 16rpx;
		margin-bottom: 16rpx;
	}

	.item-info {
		display: flex;
		flex-direction: column;
	}

	.disease-name {
		font-size: 32rpx;
		color: #333;
	}

	.disease-date {
		font-size: 28rpx;
		color: #999;
	}

	/* 新增按钮 */
	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #00cb0d;
		font-size: 32rpx;
		margin: 40rpx auto;
	}

	.add-btn uni-icon {
		background: #00cb0d;
		color: #FFF;
		border-radius: 50%;
		padding: 8rpx;
		margin-right: 12rpx;
	}

	/* 弹窗样式 */
	.uni-popup__wrap {
		background: rgba(0, 0, 0, 0.5);
		/* 遮罩层半透明 */
	}

	.popup-content {
		width: 80%;
		background: #FFF;
		border-radius: 24rpx;
		padding: 40rpx;
	}

	.popup-input {
		width: 100%;
		font-size: 28rpx;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #00cb0d;
		margin-bottom: 32rpx;
	}

	.date-picker {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.date-text {
		font-size: 28rpx;
		color: #333;
		margin-left: 12rpx;
	}

	.confirm-btn {
		width: 100%;
		background: #00cb0d;
		color: #FFF;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 16rpx;
	}

	.confirm-btn::after {
		border: none;
		/* 清除uni-app默认按钮边框 */
	}
</style>